<html>
	<header>
	
	
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

	 
	<script src="https://minedata.cn/minemapapi/v1.4/minemap.js"></script>
	 <link rel="stylesheet" href="https://minedata.cn/minemapapi/v2.0.0/minemap.css">
    <style>
       body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
        
	#menu {
        position: absolute;
        background: #fff;
        padding: 10px;
        font-family: 'Open Sans', sans-serif;
    }
</style>
</header>
<body>
 

<div id='map'></div>
<div id='menu'>
    <input id='basic' type='radio' name='rtoggle' value='4013' checked='checked'>
    <label for='basic'>默认</label>
    <input id='streets' type='radio' name='rtoggle' value='3456'>
    <label for='streets'>标准地图</label>
    <input id='bright' type='radio' name='rtoggle' value='3464'>
    <label for='bright'>清新地图</label>
    <input id='light' type='radio' name='rtoggle' value='3465'>
    <label for='light'>标准路况</label>
    <input id='dark' type='radio' name='rtoggle' value='4450'>
    <label for='dark'>都市黑夜地图</label>
    <input id='satellite' type='radio' name='rtoggle' value='4010'>
    <label for='satellite'>卫星影像</label>
</div>

<script>
  
 
minemap.accessToken = '449ba822788c46bea9f90dfba48e5269';
minemap.solution = '4013';

var myjson = {}

var map = new minemap.Map({
    container: 'map',
    style: 'http://minedata.cn/service/solu/style/id/4013',
    center: [118.8386378, 37.0313616],
    zoom: 10,
    bearing: 0,
    pitch: 45,
});


map.on('load', function () {
	
	 

    map.addLayer({
        "id": "points",
        "type": "circle",
        "source": {
            "type": "vector",
            "tiles": ["http://localhost:8004/test/pbf/{z}/{x}/{y}"]
        },
        "source-layer": "position",
        "paint": {
            "circle-radius":3,
            "circle-color":[
                            "match",
                            ["get","id"],
                            1,"#fbb03b",
                            2,"#223b53",
                            3,"#e55e5e",
                            4,"#3bb2d0",
                            "#ccc"
                            ]
        }
    });

    
});


var layerList = document.getElementById('menu');
var inputs = layerList.getElementsByTagName('input');

function switchLayer(layer) {
    var layerId = layer.target.value;
    
    console.log(layerId)
    
    /**
    minemap.accessToken = '449ba822788c46bea9f90dfba48e5269';
	minemap.solution = layerId;
    
    map.setStyle('http://minedata.cn/service/solu/style/id/' + layerId);
    */
    map = new minemap.Map({
        container: 'map',
        style: 'http://minedata.cn/service/solu/style/id/'+layerId,
        center: [118.8386378, 37.0313616],
        zoom: 10,
        bearing: 0,
        pitch: 45,
    });
    
    map.on('load', function () {
    	
   	 

        map.addLayer({
            "id": "points",
            "type": "circle",
            "source": {
                "type": "vector",
                "tiles": ["http://localhost:8004/test/pbf/{z}/{x}/{y}"]
            },
            "source-layer": "position",
            "paint": {
            	"circle-opacity":0.1,
                "circle-radius":3,
                "circle-color":[
                                "match",
                                ["get","id"],
                                1,"#fbb03b",
                                2,"#223b53",
                                3,"#e55e5e",
                                4,"#3bb2d0",
                                "#ccc"
                                ]
            }
        });

        
    });
}

for (var i = 0; i < inputs.length; i++) {
    inputs[i].onclick = switchLayer;
}
 
</script>   
</body>
</html>